<script lang="ts" setup>
    // 显示动画
    const show = ref<boolean>(true);

    // 持续时长
    const duration = ref<number>(1000);

</script>

<template>
    <!-- 动画 -->
    <u-layout
        :enable-refresh="false"
        title="动画组件示例"
    >
        <!-- 容器 -->
        <view class="container">
            <view class="line">
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-transition
                                :custom-style="{width: '100px', height: '100px', background: '#f00', display: 'flex', alignItems: 'center', justifyContent: 'center'}"
                                :duration="duration"
                                :show="show"
                                mode="fade"
                            >
                                <u-text
                                    color="#fff"
                                    text="渐显(fade)"
                                />
                            </u-transition>
                        </view>
                        <view class="ui-block">
                            <u-transition
                                :custom-style="{width: '100px', height: '100px', background: '#f00', display: 'flex', alignItems: 'center', justifyContent: 'center'}"
                                :duration="duration"
                                :show="show"
                                mode="zoom"
                            >
                                <u-text
                                    color="#fff"
                                    text="缩放(zoom)"
                                />
                            </u-transition>
                        </view>
                        <view class="ui-block">
                            <u-transition
                                :custom-style="{width: '100px', height: '100px', background: '#f00', display: 'flex', alignItems: 'center', justifyContent: 'center'}"
                                :duration="duration"
                                :show="show"
                                mode="slide-left"
                            >
                                <u-text
                                    color="#fff"
                                    text="左滑(slide-left)"
                                />
                            </u-transition>
                        </view>
                    </view>
                </view>
            </view>

            <view class="line">
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-transition
                                :custom-style="{width: '100px', height: '100px', background: '#f00', display: 'flex', alignItems: 'center', justifyContent: 'center'}"
                                :duration="duration"
                                :show="show"
                                mode="slide-right"
                            >
                                <u-text
                                    color="#fff"
                                    text="右滑(slide-right)"
                                />
                            </u-transition>
                        </view>
                        <view class="ui-block">
                            <u-transition
                                :custom-style="{width: '100px', height: '100px', background: '#f00', display: 'flex', alignItems: 'center', justifyContent: 'center'}"
                                :duration="duration"
                                :show="show"
                                mode="slide-up"
                            >
                                <u-text
                                    color="#fff"
                                    text="上滑(slide-up)"
                                />
                            </u-transition>
                        </view>
                        <view class="ui-block">
                            <u-transition
                                :custom-style="{width: '100px', height: '100px', background: '#f00', display: 'flex', alignItems: 'center', justifyContent: 'center'}"
                                :duration="duration"
                                :show="show"
                                mode="slide-down"
                            >
                                <u-text
                                    color="#fff"
                                    text="下滑(slide-down)"
                                />
                            </u-transition>
                        </view>
                    </view>
                </view>
            </view>

            <view class="line">
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-transition
                                :custom-style="{width: '100px', height: '100px', background: '#f00', display: 'flex', alignItems: 'center', justifyContent: 'center'}"
                                :duration="duration"
                                :show="show"
                                mode="fade-up"
                            >
                                <u-text
                                    color="#fff"
                                    text="上滑淡入(fade-up)"
                                />
                            </u-transition>
                        </view>
                        <view class="ui-block">
                            <u-transition
                                :custom-style="{width: '100px', height: '100px', background: '#f00', display: 'flex', alignItems: 'center', justifyContent: 'center'}"
                                :duration="duration"
                                :show="show"
                                mode="fade-right"
                            >
                                <u-text
                                    color="#fff"
                                    text="右滑淡入(fade-right)"
                                />
                            </u-transition>
                        </view>
                        <view class="ui-block">
                            <u-transition
                                :custom-style="{width: '100px', height: '100px', background: '#f00', display: 'flex', alignItems: 'center', justifyContent: 'center'}"
                                :duration="duration"
                                :show="show"
                                mode="fade-down"
                            >
                                <u-text
                                    color="#fff"
                                    text="下滑淡入(fade-down)"
                                />
                            </u-transition>
                        </view>
                    </view>
                </view>
            </view>

            <view class="line">
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-transition
                                :custom-style="{width: '100px', height: '100px', background: '#f00', display: 'flex', alignItems: 'center', justifyContent: 'center'}"
                                :duration="duration"
                                :show="show"
                                mode="fade-left"
                            >
                                <u-text
                                    color="#fff"
                                    text="左滑淡入(fade-left)"
                                />
                            </u-transition>
                        </view>
                        <view class="ui-block">
                            <u-transition
                                :custom-style="{width: '100px', height: '100px', background: '#f00', display: 'flex', alignItems: 'center', justifyContent: 'center'}"
                                :duration="duration"
                                :show="show"
                                mode="fade-zoom"
                            >
                                <u-text
                                    color="#fff"
                                    text="缩放淡入(fade-zoom)"
                                />
                            </u-transition>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <!-- //容器 -->

        <!-- 按钮 -->
        <view class="button">
            <u-button
                :text="`动画${show ? '关' : '开'}`"
                type="primary"
                @click="show = !show"
            />
        </view>
        <!-- //按钮 -->
    </u-layout>
    <!-- //动画 -->
</template>

<style lang="scss" scoped>
    // 容器
    .container
    {
        .line
        {
            .title
            {
                font-size: 14px;
                line-height: 20px;
            }

            .block
            {
                overflow: hidden;

                .ui-block-control
                {
                    display: grid;
                    grid-template-columns: repeat(3, minmax(0, 1fr));
                    grid-gap: 10px;
                    justify-items: center;

                    .ui-block
                    {
                        display: flex;
                        overflow: hidden;
                        align-items: center;
                        justify-content: center;
                        width: 100px;
                        height: 100px;
                    }
                }
            }

            &:not(:first-child)
            {
                margin-top: 16px;
            }
        }
    }

    .button
    {
        margin: 20px 20px 0;
    }
</style>